<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="修改用户名"
        left-text="返回首页"
        left-arrow
        @click-left="$router.push('/my')"
      >
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
        <template #right> </template>
      </van-nav-bar>
      <van-cell-group>
        <van-field
          v-model="user"
          label="用户名"
          placeholder="请输入要修改的用户名"
          autofocus
        />
      </van-cell-group>
      <!-- 按钮 -->
      <div class="bottom">
        <van-button
          round
          type="info"
          size="large"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="setName"
          >修改</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import {setUser} from '../../api/user'
export default {
  data() {
    return {
      user: "",
    };
  },
  methods: {
    setName(){
        setUser({userid:localStorage.getItem("userid"),username:this.user}).then((res)=>{
            console.log(res.data.data);
            Toast("修改成功");
            this.$router.push("/my")
        })
    },
  },
};
</script>

<style scoped>
.bottom{
  width: 90%;
  margin: auto;
}
</style>